<template>
  <ga-modal
    v-model:visible="visible"
    :body-style="{ paddingTop: 0 }"
    :width="640"
    @close="handleCancel(formRef)"
  >
    <template #title>销毁云机</template>
    <ga-spin style="width: 100%" :loading="loading">
      <ga-form ref="formRef" :model="formData">
        <BaseTable
          ref="baseTableRef"
          :apiUrl="213"
          :isShowAddBtn="false"
          :showSearch="false"
          :isShowLeft="false"
          :isShowPagination="false"
          :columns="columns"
          height="100%"
        />
        <ga-checkbox-group
          style="margin-top: 16px"
          direction="vertical"
          v-model="formData.type"
        >
          <ga-checkbox value="auto">保留“自动化作业平台”代理</ga-checkbox>
          <p class="text_tips" v-if="formData.type?.includes('auto')">
            保留后的云主机IP将不会释放，请至"网络管理->二层子网->IP地址管理"中查看。
          </p>
          <ga-checkbox value="bastion">保留“堡垒机”注册信息</ga-checkbox>
        </ga-checkbox-group>
      </ga-form>
    </ga-spin>
    <template #footer>
      <ga-button @click="visible = false">取消</ga-button>
      <ga-button type="primary" status="danger" @click="handleOk" :loading="okLoading">
        销毁
      </ga-button>
    </template>
  </ga-modal>
</template>

<script setup>
import { ref, h, reactive } from "vue";
import { destroyVm } from "@/api/vm";
import useLoading from "@/hooks/loading";
import multiLine from "common/multiLine.vue";
import TagStatus from "@/components/TagStatus/index.vue";

const { loading, setLoading } = useLoading(false);
const formRef = ref(null);
const okLoading = ref(false);
const formData = reactive({
  type: [],
});
const columns = [
  {
    title: "名称",
    dataIndex: "name",
    width: 150,
  },
  {
    title: "IP",
    dataIndex: "vmIps",
    width: 150,
    render: ({ record }) =>
      h(multiLine, {
        list: record.vmIps?.[0]?.ipAddresses?.map((item) => item.ipAddress),
      }),
  },
  {
    title: "状态",
    dataIndex: "vmStatus",
    width: 90,
    render: ({ record }) => h(TagStatus, { type: record?.vmStatus }),
  },
  {
    title: "CPU",
    dataIndex: "vmStatus",
  },
  {
    title: "内存",
    dataIndex: "vmStatus",
  },
  {
    title: "磁盘",
    dataIndex: "vmStatus",
  },
];
const visible = ref(false);
const curId = ref("");
const open = async (record) => {
  visible.value = true;
  if (record && record?.id) {
    setLoading(true);
    curId.value = record.id;
    Object.keys(formData).forEach((item) => {
      formData[item] = record[item];
    });
    setLoading(false);
  }
};
// 保存
const emits = defineEmits(["fetchData"]);
const handleOk = async () => {
  const res = await formRef.value?.validate();
  if (!res) {
    okLoading.value = true;
    // try {
    //   const obj = formatVpcCreateParams(type, formData, tableData.value);
    //   const { code } = await destroyVm(obj, "network-vpc");
    //   if (code === 20000) Message.success("操作成功");
    //   emits("fetchData");
    //   visible.value = false;
    // } finally {
    //   okLoading.value = true;
    // }
  }
};
const handleCancel = (formEl) => {
  curId.value = "";
  formEl.resetFields();
};
defineExpose({ open });
</script>

<style lang="scss" scoped>
:deep(.operate_containter) {
  padding-bottom: 0 !important;
}
.text_tips {
  font-size: 12px;
  line-height: 18px;
  color: #aeb2b9;
  margin-left: 28px;
}
</style>
